<template>
    <div class="cart">
        <div class="list">
            <div class="check">
                <input type="checkbox" v-model="ischecked">
            </div>
            <div class="td-inner">
                <div class="img">
                    <img :src="img_url" alt="">
                </div>
                <div class="title">
                    {{title}}
                </div>
            </div>
            <div class="price">
                <del class="pri">￥350.80</del><br>
                ￥{{price.toFixed(2)}}
            </div>
            <div class="count">
                <button @click="countnum(-1)">-</button>
                <input type="text" v-model="count">
                <button @click="countnum(1)">+</button>
            </div>
            <div class="cost">
                ￥{{(count*price).toFixed(2)}}
            </div>
            <div class="ope">
                <a href="javascript:;">移入收藏夹</a><br>
                <a href="javascript:;">删除</a>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
</template>

<script>

export default {
    props:["title","price","count","img_url","which","ischeckAll","lid"],
    data(){
        return {
            ischecked:false,
            // count1:this.count
        }
    },
    methods: {
        totalObj(count,i,ischecked,updown,total=0){
            // if(ischecked == true){
            //     total = (count*this.price).toFixed(2);
            // }else{
            //     total = total.toFixed(2);
            // }
            var obj = {
                price:this.price,
                count,
                i,
                ischecked,
                updown,
                total
            }
            return obj;
        },
        countnum(n){
            if(this.count == 1 && n == -1){
                n=0;
            }
            var count1 = this.count + n;
            if(n != 0){
                this.axios.get("updcount",{
                    params:{
                        lid:this.lid,
                        count1
                    }
                });
            }
            var obj = this.totalObj(count1,this.which,this.ischecked,n,count1*this.price)
            this.$emit("count_update",obj);
        }
    },
    watch:{
        ischecked(){
            if(this.ischecked == true){
                var obj = this.totalObj(this.count,this.which,this.ischecked,0,this.count*this.price)
            }else{
                var obj = this.totalObj(this.count*-1,this.which,this.ischecked,0,this.count*this.price*-1)
            }
            this.$emit("check_update",obj);
        },
        ischeckAll(){
            if(this.ischeckAll==true){
                this.ischecked = true;
            }else{
                this.ischecked = false;
            }
        },
    }
}
</script>

<style scoped>
    .cart{
        margin: 20px 0 0 0;
        width: 70%;
        min-width: 800px;
    }
    .list{
        width: 70%;
        min-width: 800px;
        height: 130px;
        margin: 0 auto;
        border: rgba(194, 196, 211, .5) 1px solid;
        margin-top: 20px;
        border-radius: 2px;
        margin-left: 0px;
    }
    .check{
        width: 40px;
        height: 82px;
        margin: 20px 0 0 0;
        float: left;
        text-align:center;
    }
    .td-inner{
        float: left;
        margin: 20px 0 0 0;
        width: 199px;
    }
    .td-inner>.img{
        float: left;
    }
    .td-inner>.img>img{
        width: 50px;
    }
    .td-inner>.title{
        float: left;
        margin: 0 0 0 20px;
        width: 120px;
        font-size: 12px;
        font-weight: lighter;
        font-family: 'SimSun';
    }
    .price,.cost{
        width: 159px;
        float: left;
        margin: 20px 0 0 0;
        font-size: 12px;
    }
    .cost{
        color: #ff4400;
        font-weight: bolder;
    }
    .price>.pri{
        color: rgba(142, 143, 150, 0.87);
    }
    .count{
        margin: 20px 0 0 0;
        width: 159px;
        float: left;
    }
    .count>input{
        width: 40px;
        height: 20px;
        text-align: center;
        outline:none;
    }
    .count>button{
        border: none;
        height: 24px;
        width: 15px;
        background: rgba(194, 196, 211, .5);
        outline:none;
    }
    .ope{
        margin: 20px 0 0 0;
        float: left;
        width: 80px;
    }
    .ope>a{
        text-decoration: none;
        color: black;
        font-size: 11px;
        font-weight: lighter;
    }
</style>